<!--
 * @Author: 清羽
 * @Date: 2022-09-13 21:56:09
 * @LastEditTime: 2022-12-07 23:47:24
 * @LastEditors: you name
 * @Description: 热门推荐列表
-->
<!-- recommend 页 -->
<template>
  <div class="recommend">
    <div
      class="bg-white md:bg-transparent mx-4 md:mx-0 rounded-lg md:rounded-none p-3 md:p-0"
    >
      <div class="mb-2 md:mb-4 flex justify-between items-center ">
        <p class="text-base font-bold md:font-medium md:text-2xl text-gray-800">
          热门推荐：</p>
        <p class="cursor-pointer text-xs md:text-sm">更多<i
            class='el-icon-arrow-right'
          /></p>
      </div>
      <productList
        :data="recommendList"
        :length="4"
        class="hidden md:block"
      />
      <!-- pc -->

      <van-swipe
        class="my-swipe relative w-full md:hidden"
        :autoplay="5000"
        indicator-color="#2563eb"
      >
        <van-swipe-item
          v-for="(productItem,productIndex) in recommendList"
          :key="productIndex"
        >
          <div>
            <div class="h-52">
              <img
                :src="baseUrl+ productItem.image"
                class="h-52 w-full object-scale-down p-2"
              />
            </div>
            <!-- <div>{{productItem.price}}</div> -->
            <div class="space-y-1 pb-3 pt-1">
              <div class="font-semibold text-black line-clamp-2">
                {{productItem.name}}
              </div>
              <div class="text-xs">商品详情</div>
              <div class="flex items-center justify-between pr-2">
                <!-- <div class=" text-xs text-black font-semibold">
                  ￥{{productItem.price.toFixed(2)}} 起
                </div> -->
                <p v-html="productItem.prices"></p>
                <div
                  class=" bg-gray-100 text-xs text-black font-semibold px-4 py-2 rounded-full "
                  @click="jumpProductInfo(productItem._id)"
                >立即购买</div>
              </div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
      <!-- 移动 end -->
    </div>
  </div>
</template>

<script>
import { getProductRecommendList } from '@/api/Home'
import productList from './productList.vue'
import { decimalPoint } from '@/assets/js/common.js'  // 修改价格样式
export default {
  name: "recommend",
  data () {
    return {
      recommendList: [], // 热门推荐商品列表
      baseUrl: this.$baseUrl
    }
  },
  components: { productList },
  // 生命周期 - 创建完成（访问当前this实例）
  created () {
    this.getProductRecommendList()
  },
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted () {

  },
  // 函数
  methods: {
    getProductRecommendList () {
      getProductRecommendList().then(response => {
        this.recommendList = response.data.data
        console.log("getProductRecommendList => this.recommendList", this.recommendList)

        this.recommendList.forEach(item => {    // 修改全部分类的商品价格样式
          item['prices'] = decimalPoint(item.price)
        })
      })
    },
    jumpProductInfo (value) { // 跳转商品详情
      console.log("click => value", value)
      this.$router.push({
        path: '/product/info/' + value
      })
    }
  }
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.recommend {
  :deep .van-swipe__indicators {
    position: absolute;
    bottom: 0;
  }
}
</style>